<template>
    <div class="page page-picker">
        <h2>v-picker</h2>

        <div class="attributes">
            <h2>API</h2>
            <table>
                <tr><th>参数</th><th>说明</th><th>类型</th><th>可选</th><th>默认</th></tr>
                <tr><td>slots</td><td>列对象数组<br>
                    [{<br>
                    divider: Boolean, // 列对象是否为分隔符<br>
                    content: '', // 分隔符<br>
                    values: [''], // 如果为[{}],需设定valueKey<br>
                    }]</td><td>Array</td><td>-</td><td>-</td></tr>
                <tr><td>valueKey</td><td>列对象的values如果为对象数组，此为对象的key</td><td>String</td><td>-</td><td>-</td></tr>
                <tr><td>visibleItemCount</td><td>slot中可见行数</td><td>Number</td><td>-</td><td>-</td></tr>
                <tr><th>slots</th><th colspan="4">说明</th></tr>
                <tr><td>-</td><td colspan="4">插入顶部工具栏</td></tr>
                <tr><th>events</th><th colspan="4">说明</th></tr>
                <tr><td>change</td><td colspan="4">返回v-picker对象、选中值数组（多列）<br>
                    picker对象可直接调用以下公开的方法：<br>
                    <ul>
                        <li>.getSlotValue(idx)：获取指定列选中值；</li>
                        <li>.setSlotValue(idx, val)：设定指定列的值；</li>
                        <li>.getSlotValues(idx)：获取指定列值数组；</li>
                        <li>.setSlotValues(idx, vals)：设定指定列值数组；</li>
                        <li>.getValues()：获取当前选中值（除分隔符）；</li>
                        <li>.setValues(vals)：设定所有列的值；</li>
                    </ul>
                </td></tr>
            </table>
        </div>

        <h2>示例</h2>

        <ul class="listview listview-form">
            <li>
                <v-picker :slots="yearSlot" @change="onYearChange" :visible-item-count="3"></v-picker>
            </li>
        </ul>
        <p class="desc">出生年份: {{ year }}</p>
        <pre v-highlightjs @touchend.stop><code class="html">
&lt;ul class="listview listview-form"&gt;
    &lt;li&gt;
        &lt;v-picker :slots="yearSlot" @change="onYearChange" :visible-item-count="3"&gt;&lt;/v-picker&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;p class="desc"&gt;出生年份: { { year } }&lt;/p&gt;
        </code></pre>
        <pre v-highlightjs @touchend.stop><code class="html">
export default {
    data() {
        return {
            yearSlot: [{
                flex: 1,
                values: ['1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995'],
                className: 'slot1'
            }]
        };
    },
    methods: {
        onYearChange (picker, values) {
            this.year = values[0];
        }
    }
};
        </code></pre>

        <h2>时间区间</h2>
        <ul class="listview listview-form">
            <li>
            <v-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="3"></v-picker>
            </li>
        </ul>
        <p class="desc">在校时间: {{ dateStart }} 至 {{ dateEnd }}</p>
        <pre v-highlightjs @touchend.stop><code class="html">
&lt;ul class="listview listview-form"&gt;
    &lt;li&gt;
    &lt;v-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="3"&gt;&lt;/v-picker&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;p class="desc"&gt;在校时间: { { dateStart } } 至 { { dateEnd } }&lt;/p&gt;
        </code></pre>
        <pre v-highlightjs @touchend.stop><code class="html">
export default {
    data() {
        return {
            dateSlots: [
                {
                    flex: 1,
                    values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
                    className: 'slot1',
                    textAlign: 'right'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
                    className: 'slot3',
                    textAlign: 'left'
                }
            ]
        };
    },
    methods: {
        onDateChange (picker, values) {
            if (values[0] > values[1]) {
                picker.setSlotValue(1, values[0]);
            }
            this.dateStart = values[0];
            this.dateEnd = values[1];
        }
    }
};
        </code></pre>

        <h2>联动</h2>
        <ul class="listview listview-form">
            <li>
                <v-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5"></v-picker>
            </li>
        </ul>
        <p class="desc">地址: {{ addressProvince }} {{ addressCity }}</p>
        <pre v-highlightjs @touchend.stop><code class="html">
&lt;ul class="listview listview-form"&gt;
    &lt;li&gt;
        &lt;v-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5"&gt;&lt;/v-picker&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;p class="desc"&gt;地址: { { addressProvince } } { { addressCity } }&lt;/p&gt;
        </code></pre>
        <pre v-highlightjs @touchend.stop><code class="html">
export default {
    data() {
        return {
            addressSlots: [
                {
                    flex: 1,
                    values: Object.keys(address),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: ['北京'],
                    className: 'slot3',
                    textAlign: 'center'
                }
            ]
        };
    },
    methods: {
        onAddressChange (picker, values) {
            picker.setSlotValues(1, address[values[0]]);
            this.addressProvince = values[0];
            this.addressCity = values[1];
        }
    }
};
        </code></pre>

        <ul class="listview listview-form">
            <li>
                <v-picker :slots="objSlots" valueKey="values" @change="onObjChange" :visible-item-count="5"></v-picker>
            </li>
        </ul>
        <p class="desc">当前的key： {{ objSelectedKey }} ，当前的value：{{ objSelectedValue }}</p>
        <pre v-highlightjs @touchend.stop><code class="html">
&lt;ul class="listview listview-form"&gt;
    &lt;li&gt;
        &lt;v-picker :slots="objSlots" valueKey="values" @change="onObjChange" :visible-item-count="5"&gt;&lt;/v-picker&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;p class="desc"&gt;当前的key： { { objSelectedKey } } ，当前的value：{ { objSelectedValue } }&lt;/p&gt;
        </code></pre>
        <pre v-highlightjs @touchend.stop><code class="html">
export default {
    data() {
        return {
            objSlots: [
                {
                    flex: 1,
                    values: [
                        {key: 0, values: '北京'},
                        {key: 1, values: '上海'},
                        {key: 2, values: '广州'},
                        {key: 3, values: '深圳'},
                        {key: 4, values: '天津'},
                        {key: 5, values: '大连'},
                        {key: 6, values: '杭州'},
                        {key: 7, values: '南京'},
                        {key: 8, values: '包头'}
                    ],
                    className: 'slot1',
                    textAlign: 'center'
                }
            ],
            objSelectedKey: 0,
            objSelectedValue: ''
        };
    },
    methods: {
        onObjChange (picker, values) {
            this.$logger.log('picker-demo.onObjChange: ', values);
            this.objSelectedKey = values[0]['key'];
            this.objSelectedValue = values[0]['values'];
        }
    }
};
        </code></pre>

        <div class="blank"></div>
    </div>
</template>

<script type="text/ecmascript-6">
    import vPicker from '../vendor/v-picker';

    const address = {
        '北京': ['北京'],
        '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
        '上海': ['上海'],
        '天津': ['天津'],
        '重庆': ['重庆'],
        '辽宁': ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'],
        '江苏': ['南京', '苏州', '无锡', '常州', '镇江', '南通', '泰州', '扬州', '盐城', '连云港', '徐州', '淮安', '宿迁'],
        '湖北': ['武汉', '黄石', '十堰', '荆州', '宜昌', '襄樊', '鄂州', '荆门', '孝感', '黄冈', '咸宁', '随州', '恩施土家族苗族自治州', '仙桃', '天门', '潜江', '神农架林区'],
        '四川': ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'],
        '陕西': ['西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛'],
        '河北': ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水'],
        '山西': ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁'],
        '河南': ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店'],
        '吉林': ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边朝鲜族自治州'],
        '黑龙江': ['哈尔滨', '齐齐哈尔', '鹤岗', '双鸭山', '鸡西', '大庆', '伊春', '牡丹江', '佳木斯', '七台河', '黑河', '绥化', '大兴安岭地区'],
        '内蒙古': ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '锡林郭勒盟', '兴安盟', '阿拉善盟'],
        '山东': ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'],
        '安徽': ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '巢湖', '六安', '亳州', '池州', '宣城'],
        '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
        '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
        '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州'],
        '广西': ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'],
        '江西': ['南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶'],
        '贵州': ['贵阳', '六盘水', '遵义', '安顺', '铜仁地区', '毕节地区', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'],
        '云南': ['昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州', '大理白族自治州', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州'],
        '西藏': ['拉萨', '那曲地区', '昌都地区', '林芝地区', '山南地区', '日喀则地区', '阿里地区'],
        '海南': ['海口', '三亚', '五指山', '琼海', '儋州', '文昌', '万宁', '东方', '澄迈县', '定安县', '屯昌县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'],
        '甘肃': ['兰州', '嘉峪关', '金昌', '白银', '天水', '武威', '酒泉', '张掖', '庆阳', '平凉', '定西', '陇南', '临夏回族自治州', '甘南藏族自治州'],
        '宁夏': ['银川', '石嘴山', '吴忠', '固原', '中卫'],
        '青海': ['西宁', '海东地区', '海北藏族自治州', '海南藏族自治州', '黄南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
        '新疆': ['乌鲁木齐', '克拉玛依', '吐鲁番地区', '哈密地区', '和田地区', '阿克苏地区', '喀什地区', '克孜勒苏柯尔克孜自治州', '巴音郭楞蒙古自治州', '昌吉回族自治州', '博尔塔拉蒙古自治州', '石河子', '阿拉尔', '图木舒克', '五家渠', '伊犁哈萨克自治州'],
        '香港': ['香港'],
        '澳门': ['澳门'],
        '台湾': ['台北市', '高雄市', '台北县', '桃园县', '新竹县', '苗栗县', '台中县', '彰化县', '南投县', '云林县', '嘉义县', '台南县', '高雄县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '基隆市', '新竹市', '台中市', '嘉义市', '台南市']
    };

    export default {
        data () {
            return {
                year: '1986',
                yearSlot: [{
                    flex: 1,
                    values: ['1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995'],
                    className: 'slot1',
                    defaultIndex: 2 // 可设定初始值，需要与外面的this.year一起改变，模拟接口数据
                }],
                dateSlots: [
                    {
                        flex: 1,
                        values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
                        className: 'slot1',
                        textAlign: 'right'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }, {
                        flex: 1,
                        values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
                        className: 'slot3',
                        textAlign: 'left'
                    }
                ],
                dateStart: '2002',
                dateEnd: '2002',
                addressSlots: [
                    {
                        flex: 1,
                        values: Object.keys(address),
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }, {
                        flex: 1,
                        values: ['北京'],
                        className: 'slot3',
                        textAlign: 'center'
                    }
                ],
                addressProvince: '北京',
                addressCity: '北京',

                objSlots: [
                    {
                        flex: 1,
                        values: [
                            {key: 0, values: '北京'},
                            {key: 1, values: '上海'},
                            {key: 2, values: '广州'},
                            {key: 3, values: '深圳'},
                            {key: 4, values: '天津'},
                            {key: 5, values: '大连'},
                            {key: 6, values: '杭州'},
                            {key: 7, values: '南京'},
                            {key: 8, values: '包头'}
                        ],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],
                objSelectedKey: 0,
                objSelectedValue: ''
            };
        },
        components: {
            'v-picker': vPicker
        },

        methods: {
            onYearChange (picker, values) {
                this.year = values[0];
            },

            onDateChange (picker, values) {
                if (values[0] > values[1]) {
                    picker.setSlotValue(1, values[0]);
                }
                this.dateStart = values[0];
                this.dateEnd = values[1];
            },

            onAddressChange (picker, values) {
                picker.setSlotValues(1, address[values[0]]);
                this.addressProvince = values[0];
                this.addressCity = values[1];
            },

            onObjChange (picker, values) {
                this.$logger.log('picker-demo.onObjChange: ', values);
//                picker.setSlotValues(1, address[values[0]]);
                this.objSelectedKey = values[0]['key'];
                this.objSelectedValue = values[0]['values'];
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "../scss/variables";
    @import "../scss/mixins";

    .page-picker {

        .page-picker-wrapper{
            background-color: #fff;
            text-align: center;
        }

        .blank {
            width: 100%;
            height: pxTorem(100px);
        }
    }

</style>
